<template>
  <el-dialog
    v-model="isVisibles"
    title="从OverallAuth2.0统一权限分发中心，同步数据并创建缓存"
    width="30%"
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @open="handleDialogOpen"
  >
    <div class="custom-divider-top"></div>
    <el-progress
      type="dashboard"
      :percentage="progress"
      :color="colors"
      :width="200"
      :stroke-width="12"
    >
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">{{ progressName }}</span>
      </template>
    </el-progress>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="progress===100?false:true"  type="primary" @click="handleClose">知道了</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";

export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
      required: true,
    },
    progress: {
      type: Number,
      required: true,
    },
    progressName: {
      type: String,
      required: true,
    },
  },
  emits: ["closeBnt"],
  setup(props, { emit }) {
    const percentage2 = ref(10);
    const colors = [
      { color: "#67C23A", percentage: 20 },
      { color: "#67C23A", percentage: 40 },
      { color: "#67C23A", percentage: 60 },
      { color: "#67C23A", percentage: 80 },
      { color: "#67C23A", percentage: 100 },
    ];
    const centerDialogVisible = ref(props.isVisibles);
    //关闭事件
    const handleClose = () => {
      emit("closeBnt");
    };
    //打开时加载
    const handleDialogOpen = function () {
      centerDialogVisible.value = true;
    };

    return { centerDialogVisible, handleDialogOpen, percentage2, colors, handleClose };
  },
  components: {},
});
</script>
<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>
